<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>部门费用详细信息</title>
    <link rel="stylesheet" href="css/common.css"/>
    <link rel="stylesheet" href="css/main.css"/>
    <link rel="stylesheet" href="css/jquery-ui-timepicker-addon.css"/>
    <link rel="stylesheet" href="css/jquery-ui.css"/>
    <link href="css/bootstrap.css" rel="stylesheet" type="text/css" />
    <link href="css/city-picker.css" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" href="css/jquery-impromptu.min.css" type="text/css"/>
    <link rel="stylesheet" href="css/jquery-ui-timepicker-addon.css" type="text/css"/>
    <link rel="stylesheet" href="css/combo.select.css" type="text/css"/>
</head>

<body>
<div id="dataLoad" style="display:none; position: fixed; width: 100%; top: 20%; z-index: 1001;">
            <table width=100% height=100% border=0 align=center valign=middle>
        <tr height=50%><td align=center>&nbsp;</td></tr>
        <tr><td align=center><img src="images/loading.gif"/></td></tr>
        <tr><td align=center>处理中，请稍后......</td></tr>
        <tr height=50%><td align=center>&nbsp;</td></tr>
       </table>
      </div>
<div id="section_fee_detail_dlg" class="mt10" title="部门经费使用详情" >
    <div class="box">
        <div class="box_border">
            <div class="box_top"><b class="pl15">数据筛选</b></div>
            <div class="box_center pt10 pb10" style="padding-left: 30%;">
                <table class="form_table" border="0" cellpadding="0" cellspacing="0">
                    <tr>
                        <td>时间周期：
                            <input type="text" placeholder="点击选择开始时间" name="business_start_time" class="input-text lh25" id="business_start_time" size="20">至
                            <input type="text" placeholder="点击选择结束时间" name="business_end_time" class="input-text lh25" id="business_end_time" size="20">
                        </td>
                        <td>经费类型：</td>
                        <td>
                                <span class="fl">
                                    <div class="select_border">
                                        <div class="select_containers ">
                                            <select name="" class="select" id="fee_type">

                                            </select>
                                        </div>
                                    </div>
                                </span>
                        </td>
                        <td><input type="button" value="确定" id="confirm" class="ext_btn ext_btn_submit"></td>
                    </tr>
                </table>
            </div>
        </div>
    </div>
    <div class="box">
        <div class="box_border">
            <div class="box_top"><b class="pl15">部门经费信息</b></div>
            <div class="mt10">
                <div class="mt10">
                    <div class="box span10 oh" style="margin-left: auto; margin-right: auto">
                        <table id="section_fee_detail_table" width="100%" border="0" cellpadding="0" cellspacing="0" class="list_table" style="table-layout:fixed; font-size:1.5rem">
                            <tr>
                                <th class="td_center" style="width:5%">编号</th>
                                <th class="td_center" style="width:10%">经费类型</th>
                                <th class="td_center" style="width:10%">报销总额</th>
                                <th class="td_center" style="width:10%">部门承担</th>
                                <th class="td_center" style="width:10%">报销时间</th>
                            </tr>
                        </table>
                    </div>
                    <div class="page mt10">
                        <div class="pagination">
                            <ul>
                                <li class="first-child" ><a href="#" id="firstPage" class="disabled">首页</a></li>
                                <li class="" ><a href="#" id="prevPage" class="disabled">上一页</a></li>
                                <li class="" ><a href="#" id="nextPage" class="disabled">下一页</a></li>
                                <li class="last-child " ><a href="#" id="endPage" class="disabled">末页</a></li>
                                <li class="disabled pagedata"><a id="pageInfo">1/1</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="js/jquery-ui.js"></script>
<script type="text/javascript" src="js/common.js"></script>
<script type="text/javascript" src="js/config.js"></script>
<script type="text/javascript" src="js/jquery-impromptu.min.js"></script>
<script src="js/jquery.combo.select.js" type="text/javascript"></script>
<script src="js/jquery.combo.select.js" type="text/javascript"></script>
<script type="text/javascript" src="js/jquery-ui-timepicker-addon.js"></script>
<script type="text/javascript" src="js/datapicker_cn.js"></script>

<script>
    //辅助变量，当前的所有数据
    var section_fee_detail = {};

    var firstSet = true;

    //辅助函数，获取经费类型
    function getFeeType(){
        $('#dataLoad').show();
        $('#fee_type').append("<option value='-1'>全部类型</option>");
        $('#fee_type').append("<option value='0'>差旅费</option>");
        $.get(url + 'Common/GetFeeItem.php', function(data){
            var t = JSON.parse(data);
            $('#dataLoad').hide();
            if(t.state == 1){
                for(var i = 0; i < t.data.length; i++){
                    $('#fee_type').append("<option value='" + t.data[i].id + "'>" + t.data[i].name + "</option>");
                }
                $('#fee_type').comboSelect();
            }
            else{
                $.prompt("<h3>网络繁忙，请稍后再试</h3>", {
                    title: '错误提醒',
                    buttons: {'确定': true},
                    submit: function(e, v, m, f){
                        if(v){
                            jumpPage('guide.html');
                        }
                    }
                })
            }
        })
    }

    //辅助函数，获取信息
    function getSectionFinanceFeeDetail(){
        var section_id = window.localStorage.getItem('curSection');
        var begin_time = $('#business_start_time').val();
        var end_time = $('#business_end_time').val();
        var fee_type = $('#fee_type').val();
        $.post(url + 'FinanceFeeManage/GetSectionAllApproveFee.php',
            {'section_id':section_id, 'begin_time':begin_time, 'end_time':end_time, 'fee_type':fee_type}, function(data){
                var t = JSON.parse(data);
                if(t.state == 1){
                    section_fee_detail = t.data;
                    if(firstSet){
                        createTablePage(t.total_count);
                        firstSet = false;
                    }
                    showFeeDetailTable();
                }
                else{
                    $.prompt("<h3>网络繁忙，请稍后再试</h3>", {
                        title: '错误提醒',
                        buttons: {'确定': true}
                    })
                }
            })
    }
    //辅助函数，初始化显示表格
    function showFeeDetailTable(){
        $(".info_tr").empty();

        var start = (curPage-1) * rowPerPage;
        var end = (section_fee_detail.length - start)> rowPerPage ? rowPerPage : section_fee_detail.length;
        for (var i = start; i < end; i++) {
            $('#section_fee_detail_table').append("" +
                "<tr class='tr info_tr'>" +
                "<td class='td_center'>" + (i + 1) + "</td>" +
                "<td class='td_center'>" + (section_fee_detail[i].type == 1 ? '差旅报销' : section_fee_detail[i].fee_name) + "</td>" +
                "<td class='td_center'>" + section_fee_detail[i].fee + "</td>" +
                "<td class='td_center'>" + section_fee_detail[i].is_section + "</td>" +
                "<td class='td_center'>" + section_fee_detail[i].check_time + "</td>" +
                "</tr>");
        }
    }


    $(function(){
        setDataPicker();
        $('#business_start_time').datepicker();
        $('#business_end_time').datepicker();
        getFeeType();

        $('#confirm').click(function(){
            firstSet = true;
            getSectionFinanceFeeDetail();
        });
        clickFirstPage(showFeeDetailTable);
        clickEndPage(showFeeDetailTable);
        clickNextPage(showFeeDetailTable);
        clickPrevPage(showFeeDetailTable);



    })
</script>
</html>